<template>
    <div>
     
      <h2>Child子级组件</h2>
      <h4>msg:{{msg}}</h4>
      <button @click='update'>更新数据</button>
    </div>
  </template>

<script lang="ts">
    import {
        defineComponent,
        ref,
        onUpdated,
        onBeforeUpdate,
        onMounted,
        onBeforeMount,
        onBeforeUnmount,
        onUnmounted
    } from 'vue';

    export default defineComponent({
        name: 'Child2',
        //Vue.x中的生命周期钩子
        beforeCreate() {
            console.log('2.x中的beforeCreate');
        },
        created() {
            console.log('2.x中的createds');
        },
        beforeMount() {
            console.log('2.x中的beforeMount');
        },
        mounted() {
            console.log('2.x中的mounter');
        },
        beforeUpdate() {
            console.log('2.x中的beforeUpdate');
        },
        updated() {
            console.log('2.x中的updated');
        },
        // beforeDestroy() {
        //     console.log('2.x中的beforeDestroy');
        // },
        // destroyed() {
        //     console.log('2.x中的destroyed');
        // }, 这两个Vue2.x 已经在vue3中改名了 所以不能使用；1
        beforeUnmount() {
            console.log('2.x中的beforeUnmount');
        },
        unmounted() {
            console.log('2.x中的Unmounted');
        },
        //说明vue3.的钩子函数比2.0中生命周期函数快
        setup() {
            console.log('3.0中的setup');
            const msg = ref('abc')
            const update = () => {
                msg.value += '==='
            }
            onBeforeMount(() => {
                console.log('3.0中的onBeforeMount');
            })
            onMounted(() => {
                console.log('3.0中的onMounted');
            })
            onBeforeUpdate(
                () => {
                    console.log('3.0中的onBeforeUpdate');
                }
            )
            onBeforeUnmount(
                    () => {
                        console.log('3.0中的onBeforeUnmount');
                    }
                ),
                onUpdated(() => {
                    console.log('3.0中的onUpdated');
                })
            onUnmounted(() => {
                console.log('3.0x中的onUnmounted');
            })
            return {
                msg,
                update
            }
        }
    });
</script>